<template>
  <el-dialog
    @closed="closed"
    title="批量导入"
    :visible.sync="dialogFormVisible"
  >
    <div class="item tip">
      批量导入仅支持 .xlsx 格式文件，请按照模板格式组织数据。
    </div>
    <div class="item inline">
      <span>选择文件：</span>
      <el-input v-model.trim="fileName"></el-input>
      <el-upload
        ref="upload"
        :on-change="fileChange"
        class="upload-demo"
        :auto-upload="false"
        :show-file-list="false"
        action="#"
        accept=".xlsx"
        :limit="1"
      >
        <el-button size="small">选择</el-button>
      </el-upload>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "BatchImportDialog",
  props: {
    type: {
      type: String,
      default: "目标信息",
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      fileName: null,
      file: null,
    };
  },
  methods: {
    fileChange(file) {
      console.log("@选择文件", file);
      if (file.name.split(".")[1] !== "xlsx") {
        this.$refs.upload.clearFiles();
        return this.$message.warning("请选择正确格式的文件");
      }
      this.fileName = file.name;
      this.file = file.raw;
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    submit() {
      if (!this.file) return this.$message.warning("请选择文件");
      let form = new FormData();
      form.append("file", this.file);
      form.append("projectId", this.$parent.curProject);
      if (this.type == "位置信息") {
        this.$axios
          .post(this.$api.situationInfo.importTargetInfo, form)
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message);
              this.dialogFormVisible = false;
              this.closed();
              this.$emit("importCompleted");
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      } else {
        this.$axios
          .post(this.$api.situationInfo.importDynamic, form)
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message);
              this.dialogFormVisible = false;
              this.closed();
              this.$emit("importCompleted");
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      }
    },
    closed() {
      this.fileName = null;
      this.file = null;
      this.$refs.upload.clearFiles();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0;
}
/deep/ .el-dialog {
  width: 500px;
  border-radius: 5px;

  .el-dialog__body {
    padding: 0 30px;
    border-top: 1px solid $gray-400;
  }
  .el-dialog__footer {
    padding: 0 30px;
    padding-bottom: 20px;
  }
}

.item {
  margin: 20px 0;
}

.tip {
  color: #ccc;
}

.inline {
  display: flex;
  align-items: center;
  span {
    white-space: nowrap;
  }
  .el-input,
  .el-button {
    height: 40px;
  }
  .el-button {
    margin-left: 10px;
    border-color: #4089f1;
    color: #4089f1;
  }
}
</style>
